<template>
    <el-container style="overflow: auto;">
    <el-main>
         <!-- 轮播图 -->
         <el-card style="width: 70%;margin-top: -3%;height: 380px;margin-left: 34%;">
            <el-carousel :interval="4000" style="height: 30%;" autoplay="true" indicator-position="inside">
              <el-carousel-item v-for="item in items" :key="item">
                <a :href="item.url">
                  <img :src="item.src">
                </a>
              </el-carousel-item>
            </el-carousel>
            <!--<el-divider class="line-color"></el-divider>-->
            <!--<el-divider style="background: #fff240;margin-top: -9%"></el-divider>-->
            <!--<el-divider style="background: #9996ff;margin-top: -8%"></el-divider>-->
          </el-card>
          <el-card style="background: #777779;width: 60%;height: 10%;margin-top: -3%;margin-left: 40%">
            <el-tooltip content="了解全球金融变化趋势" placement="top">
              <a href="https://www.tencent.com" style="font-size: 27px;font-weight: 200"><i
                  class="el-icon-ship"></i>&nbsp;金融</a>
            </el-tooltip>
            <el-divider direction="vertical"></el-divider>
            <el-tooltip content="了解几年来的科技发展情况" placement="top">
              <a href="https://www.tencent.com" style="font-size: 27px;font-weight: 200"><i
                  class="el-icon-s-platform"></i>&nbsp;科技</a>
            </el-tooltip>
            <el-divider direction="vertical"></el-divider>
            <el-tooltip content="了解去中心化的加密安全技术" placement="top">
              <a href="https://www.tencent.com" style="font-size: 27px;font-weight: 200"><i
                  class="el-icon-s-open"></i>&nbsp;区块链</a>
            </el-tooltip>
            <el-divider direction="vertical"></el-divider>
            <el-tooltip content="拍摄属于自己的风景" placement="top">
              <a href="https://www.tencent.com" style="font-size: 27px;font-weight: 200"><i
                  class="el-icon-camera-solid"></i>&nbsp;摄影</a>
            </el-tooltip>
            <el-divider direction="vertical"></el-divider>
            <el-tooltip content="戏剧丰富人生，艺术创造生活" placement="top">
              <a href="https://www.tencent.com" style="font-size: 27px;font-weight: 200"><i
                  class="el-icon-picture-outline"></i>&nbsp;艺术人生</a>
            </el-tooltip>
    
          </el-card>
          <!--日历模块-->
          <el-card
            style="width: 40%;margin-left: 0%;height: 300px;margin-top: -6%;box-shadow: 0 0 25px rgba(154, 154, 183, 0.48); overflow-y:auto;overflow-x:hidden;">
            <el-calendar v-model="value" style="color: black;width: 100%;"></el-calendar>
          </el-card>
    
          <!--<el-divider direction="vertical" content-position="left"></el-divider>-->
          <!--<HR align=center width=300 color=#987cb9 SIZE=1>-->
          <!--资讯栏-->
    
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
</template>

<script>
export default{
    name:'HeaderPage',
    data(){
        return {
            items: [
          { src: require('../assets/img1.jpg'), url: 'https://www.baidu.com' },
          { src: require('../assets/img1.jpg'), url: 'https://www.baidu.com' },
          { src: require('../assets/img1.jpg'), url: 'https://www.baidu.com' },
          { src: require('../assets/img1.jpg'), url: 'https://www.baidu.com' },
          { src: require('../assets/img1.jpg'), url: 'https://www.baidu.com' },
        ]
        }
    }
}
</script>

<style>
    a {
    text-decoration: none;
    color: #ffffff;
  }

  a:hover {
    color: #72b3ff
  }

  .bg-purple-dark {
    background: rgba(70, 68, 79, 0.96);
  }

  .grid-content {
    border-radius: 4px;
    min-height: 90px;
  }

  .el-header {
    background: rgba(70, 68, 79, 0.89);
    color: #333;
    text-align: center;
    line-height: 80px;
    box-shadow: 0 0 25px rgba(255, 242, 64, 0.48);
  }

  .el-footer {
    background: #B3C0D1;
    color: rgb(37, 37, 37);
    text-align: center;
    line-height: 60px;
  }

  /*.el-main {*/
  /*background: url("../assets/header.jpg");*/
  /*color: #333;*/
  /*height: 600px;*/
  /*text-align: center;*/
  /*line-height: 160px;*/
  /*}*/
  /*.el-carousel__item h3 {*/
  /*color: #000000;*/
  /*font-size: 14px;*/
  /*opacity: 0.75%;*/
  /*line-height: 200px;*/
  /*margin: 0;*/
  /*}*/
  /*.el-cascader__item:nth-child(2n) {*/
  /*background-color: #bfc1ff;*/
  /*}*/
  /*.el-carousel__item:nth-child(2n+1) {*/
  /*background-color: #9dcce6;*/
  /*} */

  .line-color {
    margin-top: -10%;
    background: #e62723;
  }

  .card-width {
    width: 50%;
  }
</style>